<script>
export default {
  data() {
    return {
      pageInfo: {
        pageNo: 1,
        pageSize: 13,
        hasMore: false
      },
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().getFullYear(), 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 6);
            picker.$emit('pick', [start, end]);
          }
        }],
        selected: [new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 7), new Date()]
      },
      dealSateList: {
        selected: null,
        list: [
          {
            id: null,
            name: '所有'
          },
          {
            id: 'UN_READ',
            name: '待处理'
          },
          {
            id: 'READED',
            name: '已处理'
          }
        ]
      },
      warningTypeList: {
        selected: null,
        list: [
          {
            id: null,
            name: '所有'
          },
          {
            id: 'SAFE_UP',
            name: '高于安全值告警'
          },
          {
            id: 'SAFE_LOW',
            name: '低于安全值告警'
          },
          {
            id: 'OFFLINE',
            name: '设备掉线告警'
          },
          {
            id: 'EXCEPTION_DATA',
            name: '数据异常告警'
          }
        ]
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData: function () {
      const data = {
        content: {
          type: this.warningTypeList.selected,
          state: this.dealSateList.selected,
          fromDate: this.$getTimeInfo(this.pickerOptions.selected[0]).toMin,
          toDate: this.$getTimeInfo(this.pickerOptions.selected[1]).toMin,
          pageSize: this.pageInfo.pageSize,
          pageNo: this.pageInfo.pageNo
        }
      }
      this.$axios({url:'/ems/client/warning/list',data: data}).then((content) => {
        this.tableData = content.list
        this.pageInfo.hasMore = content.hasMore
      });
    },
    nextPage: function (i) {
      this.pageInfo.pageNo = this.pageInfo.pageNo + i
      this.fetchData()
    },
    dealAction: function (id) {
      const data = {
        content: {
          ids: [id]
        }
      }
      this.$axios({url:'/ems/client/warning/deal',data: data}).then(() => {
        this.pageInfo.pageNo = 1
        this.fetchData()
      });
    }
  }
}
</script>

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <label>报警类型：</label>
        <el-select v-model="warningTypeList.selected" placeholder="请选择报警类型">
          <el-option
              v-for="item in warningTypeList.list"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
        &nbsp;
        <label>处理状态：</label>
        <el-select v-model="dealSateList.selected" placeholder="处理状态">
          <el-option
              v-for="item in dealSateList.list"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
        &nbsp;
        <label>查询时间：</label>
        <el-date-picker
            v-model="pickerOptions.selected"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
        </el-date-picker>
        &nbsp;
        <el-button @click="fetchData">查询</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :span="24">
        <el-table
            :data="tableData"
            stripe
            style="width: 100%">
          <el-table-column align="center" prop="id" label="序号" width="100"></el-table-column>
          <el-table-column  align="center" prop="typeName"  label="报警类型"  width="180"> </el-table-column>
          <el-table-column  prop="content" label="报警内容" width="300"></el-table-column>
          <el-table-column  prop="value" label="报警关键字"> </el-table-column>
          <el-table-column prop="objName" label="关联内容"> </el-table-column>
          <el-table-column align="center" prop="time" label="报警时间"> </el-table-column>
          <el-table-column align="center" prop="handleStatus" label="处理状态"> </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="200"
              align="center">
            <template slot-scope="scope">
              <el-button v-if="!scope.row.done" @click="dealAction(scope.row.id)" type="text" size="small">去处理</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :span="24" style="text-align: right;">
        <el-button v-if="pageInfo.pageNo > 1" type="primary" plain @click="nextPage(-1)">上一页</el-button>
        <el-button v-if="pageInfo.hasMore" type="primary" plain @click="nextPage(1)">下一页</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<style>

</style>
